/*
 * Copyright © 2015-2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../styles/variables.less";
@import "../../../node_modules/@bower_components/bootstrap/less/mixins.less";
@import "../../styles/themes/cdap/mixins.less";
@import "./color-constants.less";

@node-box-width: 200px;
@node-box-width-with-errors: 140px;
@node-box-width-without-errors: 148px;
@node-box-height-big: 100px;
@condition-box-width: 105px;
@condition-box-height: 105px;
@endpoint-circle-radius: 7px;

.increase-border-height-width(@currentHeight, @currentWidth) {
  @current-border-width: 2px;
  @new-border-width: 4px;
  border-width: @new-border-width;

  margin: -(@new-border-width - @current-border-width);
  width: @currentWidth + (@new-border-width - @current-border-width) * 2;
  height: @currentHeight + (@new-border-width - @current-border-width) * 2;
}

.border-color-hover(@currentHeight, @currentWidth: @node-box-width) {
  border: 2px solid currentColor;

  &:hover {
    .increase-border-height-width(@currentHeight, @currentWidth);
    cursor: pointer;
  }

  &.drag-hover {
    .increase-border-height-width(@currentHeight, @currentWidth);

    .node {
      background-color: @drag-drop-bg-color;
    }
  }
}

.set-node-color(@node-color) {
  color: @node-color;

  &.selected {
    border-color: @node-color;
    color: white;
    .node {
      background-color: @node-color;

      .node-configure-btn {
        background-color: transparent;
        &:hover {
          background-color: darken(@node-color, 10%);
        }

        .node-configure-btn-label {
          color: white;
        }
      }

      .node-preview-data-btn {
        a {
          color: white;
        }
      }

      &:not(.disabled):hover {
        .menu-icon-node {
          color: white;
        }
      }
    }
  }
}

my-dag-plus {
  .zoom-control {
    z-index: 998;
    right: 15px;

    button.btn.btn-default {
      &[disabled] {
        opacity: 1;
        background-color: white;

        i.fa {
          opacity: 0.5;
        }
      }
    }
    .toggle-comments-action-btn {
      &.toggle-enabled {
        background-color: #6a7387;
        color: white;
        &:before {
          background-color: #7cd2eb;
        }
      }
      &:before {
        content: ' ';
        position: absolute;
        height: 5px;
        width: 5px;
        background: #1a73e8;
        border-radius: 50%;
        right: 5px;
      }
    }
  }

  .my-js-dag.preview-mode {
    .box.action {
      .node {
        box-shadow: none;
        filter: drop-shadow(0 0 10px @preview-outline-color);
      }
    }
    .box {
      .node {
        box-shadow: 0 0 0 2px @preview-outline-color;

        .node-splitter-popover {
          > .arrow {
            border-right-color: @preview-outline-color;
          }

          .popover-content {
            box-shadow: 0 0 0 2px @preview-outline-color;
          }
        }
      }
    }
  }

  .my-js-dag {
    width: inherit;
    height: inherit;

    #diagram-container {
      position: relative;
      width: inherit;
      height: inherit;
      overflow: hidden;
      cursor: crosshair;

      &.move-mode,
      &.disabled {
        cursor: move;
      }
    }

    &.disabled {
      background-image: none;
      border: 0;
      background-color: @table-bg;

      &.normal-cursor #dag-container * {
        cursor: default;
      }

      .border-radius(4px);

      .box {
        height: @node-box-height-big;
        .border-color-hover(@node-box-height-big);

        .node {
          cursor: initial;

          .endpoint-circle {
            top: 41px;
          }
        }
      }

      .jsplumb-connector,
      .jsplumb-endpoint {
        cursor: initial;
      }
    }

    .box {
      position: absolute;
      cursor: move;
      top: 150px;
      padding: 0;
      height: @node-box-height-big;
      width: @node-box-width;
      z-index: 2;
      .border-color-hover(@node-box-height-big);
      left: 30vw;
      user-select: none;

      // Setting default node color
      .set-node-color(@transform-plugins-color);

      &.node-menu-open {
        z-index: 3;
      }

      .comments-wrapper {
        position: absolute;
        top: -30px;
        right: 0;
        color: #1a73e8;
        z-index: 2;

        [comment] {
          display: block;
        }
      }

      .node {
        position: relative;
        background-color: white;
        margin: 0 auto;
        padding: 12px;
        height: 100%;
        .box-shadow(0 10px 18px -9px fade(black, 50%));
        .transition(background-color 50ms linear);
        .transition(color 50ms linear);
        background-clip: border-box;
        z-index: 1;

        .endpoint-circle {
          width: @endpoint-circle-radius * 2;
          height: @endpoint-circle-radius * 2;
          background-color: @endpoint-circle-bg-color;
          border-radius: 100%;
          position: absolute;
          right: -@endpoint-circle-radius;
          top: 41px;
          display: flex;
          align-items: center;
          justify-content: center;

          &:before {
            content: '';
            position: absolute;
            left: 100%;
            width: 5px;
            border-bottom: 2px solid @endpoint-connection-hover-stroke-color;
            display: none;
          }

          &:after {
            content: '';
            width: 0;
            height: 0;
            border-top: @endpoint-circle-radius solid transparent;
            border-bottom: @endpoint-circle-radius solid transparent;
            border-left: @endpoint-circle-radius solid @endpoint-connection-hover-stroke-color;
            transform: translateX(12px);
            display: none;
          }

          .endpoint-caret {
            width: 0;
            height: 0;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: @endpoint-circle-radius solid @endpoint-caret-bg-color;
            transform: translateX(1px);
          }

          &:hover,
          &.hover {
            &:not(.disabled):not(.node-splitter-endpoint) {
              background-color: @endpoint-connection-hover-stroke-color;

              &:before,
              &:after {
                display: block;
              }

              .endpoint-caret {
                visibility: hidden;
              }
            }
          }

          &.node-splitter-endpoint {
            .node-spitter-num-ports {
              color: @endpoint-caret-bg-color;
            }
          }

          &.endpoint-circle-bottom {
            bottom: -@endpoint-circle-radius;
            right: 43px;

            &:before {
              left: 6px;
              top: 100%;
              border-bottom: none;
              border-left: 2px solid;
              height: 5px;
            }

            &:after {
              border-top: @endpoint-circle-radius solid @endpoint-connection-hover-stroke-color;
              border-left: @endpoint-circle-radius solid transparent;
              border-right: @endpoint-circle-radius solid transparent;
              transform: translate(-4px, 19px);
            }

            .endpoint-caret {
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
              border-top: @endpoint-circle-radius solid @endpoint-caret-bg-color;
              transform: translateY(3px);
            }
          }
        }

        .node-info {
          display: grid;
          overflow: hidden;
          grid-template-columns: 25px minmax(auto, @node-box-width-with-errors);
          align-items: flex-start;

          &.node-no-errors {
            grid-template-columns: 25px minmax(auto, @node-box-width-without-errors);
          }

          .node-icon {
            font-size: 25px;
            display: inline-block;

            &.icon-container {
              img {
                height: 25px;
                width: 25px;
                vertical-align: top;
              }
            }
          }

          .node-metadata {
            display: inline-block;
            margin-left: 8px;
            line-height: 1.2;

            .node-name,
            .node-version {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }

            .node-name {
              font-size: 14px;
              font-weight: bold;
              margin-bottom: 5px;
            }

            .node-version {
              font-size: 11px;
            }
          }
        }

        .node-metrics {
          position: absolute;
          bottom: 24px;

          /* 24px = left & right padding of node content (12px x 2) */
          width: ~"-moz-calc(100% - 24px)";
          width: ~"-webkit-calc(100% - 24px)";
          width: ~"calc(100% - 24px)";
        }
        .node-preview-data-btn {
          position: absolute;
          bottom: 20px;
          left: 13px;
        }

        .node-alerts-errors {
          position: absolute;
          bottom: 3px;
          color: @hamburger-menu-color;

          .node-alerts,
          .node-errors {
            display: inline-block;
            position: relative;

            .endpoint-circle {
              &.endpoint-circle-bottom {
                right: 6px;
                top: 16px;
                bottom: 0;
              }
            }
          }

          .node-errors {
            margin-left: 5px;
          }
        }

        .node-actions {
          display: flex;
          position: absolute;
          bottom: 0;
          right: 0;
          padding-bottom: 10px;
          align-items: center;

          .menu-icon-node {
            padding-right: 12px;
            margin-left: auto;

            &.fa.fa-bars {
              &.disabled {
                cursor: not-allowed;
              }

              &:not(.disabled) {
                &:hover {
                  color: @hamburger-hover-color;
                }
              }
            }
          }
        }

        .error-node-notification {
          color: white;
          position: absolute;
          top: 1px;
          right: 3px;
          .badge {
            &:hover {
              background-color: @blue-03;
            }
          }
          .badge-warning {
            background-color: @badge-warning-color;
          }
          .badge-danger {
            background-color: @badge-danger-color;
          }
        }

        .node-configure-btn {
          font-size: 13px;
          border: 1px solid currentColor;
          padding: 3px 7px;
          background-color: white;
          border-radius: 5px;
          display: none;

          .node-configure-btn-label {
            color: @configure-btn-label-color;
          }

          &:hover {
            background-color: @configure-btn-bg-hover-color;
          }

          &:focus {
            outline: none;
          }

          &.btn-shown {
            display: initial;
          }
          &.btn-disabled {
            cursor: not-allowed;
          }
        }

        &:hover,
        &:focus {
          .node-version {
            display: none;
          }

          .node-configure-btn {
            display: initial;
          }

          .menu-icon-node {
            &:not(.disabled) {
              color: @hamburger-node-hover-color;
            }
          }
        }
      }

      .menu-icon {
        font-size: 16px;
        color: @hamburger-menu-color;
      }

      &.realtimesource,
      &.streamingsource,
      &.batchsource {
        .set-node-color(@source-plugins-color);
        left: 10vw;
      }

      &.realtimesink,
      &.batchsink,
      &.sparksink {
        .set-node-color(@sink-plugins-color);
      }

      &.errortransform {
        .set-node-color(@error-transform);
        left: 50vw;
      }

      &.alertpublisher {
        .set-node-color(@alertpublisher-plugins-color);
        left: 50vw;
      }

      &.action,
      &.sparkprogram {
        left: 10vw;
        top: 30vw;
      }

      &.action {
        .set-node-color(@action-plugins-color);
      }

      &.sparkprogram {
        .set-node-color(@spark-plugins-color);
      }
      &.condition {
        .set-node-color(@condition-plugin-color);
        left: 30vw;

        width: @condition-box-width;
        height: @condition-box-height;

        .border-color-hover(@condition-box-height, @condition-box-width);

        .node {
          padding: 5px 0;

          .endpoint-circle {
            top: 44px;
            background-color: @condition-true-endpoint-bg-color;

            &:before {
              border-bottom-color: @condition-true-endpoint-bg-color;
            }

            &:after {
              border-left-color: @condition-true-endpoint-bg-color;
            }

            &:hover,
            &.hover {
              &:not(.disabled) {
                background-color: @condition-true-endpoint-bg-color;
              }
            }

            &.endpoint-circle-bottom {
              top: initial;
              background-color: @condition-false-endpoint-bg-color;

              &:before {
                border-left-color: @condition-false-endpoint-bg-color;
                border-bottom-color: transparent;
              }

              &:after {
                border-top-color: @condition-false-endpoint-bg-color;
                border-left-color: transparent;
              }

              &:hover,
              &.hover {
                &:not(.disabled) {
                  background-color: @condition-false-endpoint-bg-color;
                }
              }
            }
          }

          .node-info {
            display: initial;
            text-align: center;

            .node-icon,
            .node-metadata {
              display: block;
            }

            .node-metadata {
              transform: initial;
              margin: initial;
              padding: 0 7px;
              white-space: nowrap;
            }
          }

          .node-actions {
            padding-bottom: 5px;
            padding-right: 7px;

            .menu-icon-node {
              padding-right: 0;
            }
          }
        }

        .node-popover-menu {
          right: -60px;
          top: 75px;
        }
      }
    }

    .node-popover-menu {
      width: 120px;
      border: 1px solid black;
      background-color: white;
      z-index: 1000;
      position: absolute;
      right: calc(30px - 120px);
      top: 65px;

      .menu-icon {
        color: @hamburger-hover-color;
        padding: 5px;
      }

      .menu-content {
        color: @configure-btn-label-color;

        hr { margin: 0; }

        .menu-content-action {
          padding: 5px 10px;

          &:hover {
            background-color: @node-menu-action-bg-color;
          }

          &.disabled {
            cursor: not-allowed;
            opacity: 0.5;
          }

          &.menu-content-delete {
            cursor: pointer;
            color: @node-menu-delete-color;
          }
        }
      }
    }

    .comment-box {
      position: absolute;
      width: 200px;
      min-height: 50px;
      background-color: @comment-box-color;
      border-radius: 4px;
      cursor: move;

      div.comment-content {
        padding: 15px;
        word-break: break-all;
      }

      textarea.form-control {
        height: 100px;
        background-color: @comment-box-color;
        resize: none;

        &:focus {
          border: none;
        }
      }

      .fa.fa-close {
        position: absolute;
        right: 3px;
        top: 3px;
        cursor: pointer;
        .opacity(0);
        .transition(opacity 0.2s ease);
      }
      &:hover {
        .fa.fa-close {
          .opacity(1);
        }
      }
    }

    .error-container {
      position: fixed;
      bottom: 50px;
      left: 0;
      right: 0;
      width: 75%;
      margin: 0 auto;

      .error-close-icon {
        cursor: pointer;
      }

      &.well {
        background-color: @brand-danger;
        .border-radius(8px);
        color: white;
      }
    }

    #dag-container {
      height: 100%;
      width: inherit;
      position: absolute;
    }

    svg.jsplumb-dragging {
      path {
        stroke: @endpoint-connection-hover-stroke-color;
        stroke-width: 2;
      }

      path:last-child {
        fill: @endpoint-connection-hover-stroke-color;
      }
    }

    .jsplumb-endpoint {
      cursor: pointer;
      z-index: 2;

      svg * {
        fill: transparent;
        stroke: transparent;
      }
    }

    .jsplumb-connector {
      cursor: pointer;

      path:last-child {
        stroke-width: 0;
      }
    }

    .jsplumb-dragging {
      z-index: 2;
    }

    .condition-label {
      color: @condition-label-color;
      background: @condition-plugin-color;
      padding: 6px;
      width: 42px;
      z-index: 2;
      border-radius: 15%;
      text-align: center;
      font-size: 11px;
      line-height: 6px;
    }

    /* metrics overlay */
    .metric-label-text {
      color: #397cf1;
      font-size: 12px;
    }

    .metric-error-label {
      color: @brand-danger;
    }
  }

  div.jsplumb-overlay {
    div.label-container {
      cursor: pointer;
      height: 14px;
      width: 14px;
      text-align: center;
      background-color: white;
      line-height: 14px;
      font-size: 10px;
      color: #4f5464;
      vertical-align: middle;
      .border-radius(1px);
      .box-shadow(0 0 0 3px fade(black, 20%));
      &:hover,
      &:focus {
        background-color: #4f5464;
        color: white;
      }
      i.icon-schemaedge {
        font-size: 9px;
      }
    }
  }
  .metric-label {
    display: inline-block;
    width: 100px;
  }

}

.tooltip .tooltip-inner {
  ul {
    padding-left: 20px;
  }
}

.badge-warning {
  background-color: @brand-warning;
}

.badge-error {
  background-color: @brand-danger;
}

.theme-cdap {
  .tooltip-warning {
    &.tooltip {
      &.top {
        .tooltip-arrow {
          border-top-color: @brand-warning;
        }
      }
    }
    .tooltip-inner {
      background-color: @brand-warning;
      border-color: @brand-warning;
    }
  }
  .tooltip-error {
    &.tooltip {
      &.top {
        .tooltip-arrow {
          border-top-color: @brand-danger;
        }
      }
    }
    .tooltip-inner {
      background-color: @brand-danger;
      border-color: @brand-danger;
    }
  }
}

.popover {
  min-width: 250px;
  max-width: 400px;

  .popover-title {
    background-color: white;
    border-bottom: 0;
    padding: 11px 10px;
    h4 span {
      font-weight: 500;
    }
    i.fa.fa-times {
      color: #b4b4b6;
      cursor: pointer;
    }
  }

  .popover-content {
    padding: 0 10px 10px;
  }
}
